<template>
  <div class="app-container">
    <div class="center-box">
      <!-- <img :src="'http://127.0.0.1/imgs/1711872641585.jpeg'" alt=""> -->
      <div
        v-for="(item, index) in 9"
        :key="index"
        :class="['item', 'item' + index]"
      ></div>
    </div>
  </div>
</template>

<script setup>
//  http://127.0.0.1/imgs/1687610269903.jpeg', 'http://127.0.0.1/imgs/1711872641585.jpeg'
</script>

<style lang="scss" scoped>
@for $i from 0 through 8 {
  .item#{$i} {
    background-image: url("@/assets/images/our.jpeg");
    background-repeat: no-repeat;
    background-size: 300% 300%;
    @if $i < 3 {
      background-position: ($i * 50%) ($i * 0);
    } @else if $i >= 3 and $i < 6 {
      background-position: (($i - 3) * 50%) 50%;
    } @else {
      background-position: (($i - 6) * 50%) 100%;
    }
  }
}
.app-container {
  width: 100%;
  height: 100%;
  // background: rgba(255, 0, 0, 0.192);
  display: flex;
  justify-content: center;
  align-items: center;

  .center-box {
    width: 1080px;
    height: 810px;
    // background: rgba(0, 0, 255, 0.192);
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: center;
    // align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
    .item {
      float: left;
      width: 30%;
      height: 30%;
      background-color: #fff;
      transition: all 0.3s;
      margin: 13px;
    }
  }
  // center-box  添加hover效果 子元素添加margin
  .center-box:hover .item {
    margin: 0;
  }
}
</style>